<template>
  <div class="container">
    <view class="steps grids">
      <view class="step" v-for="(item, index) in 8" :key="index" :class="{ active: index == current }"></view>
    </view>

    <baseInfo v-if="current == 0" v-model="model" @fatherMethod="nextStep"></baseInfo>
    <heightHomeTown v-else-if="current == 1" v-model="model" @fatherMethod="nextStep"></heightHomeTown>
    <educationSchool v-else-if="current == 2" v-model="model" @fatherMethod="nextStep"></educationSchool>
    <occupation v-else-if="current == 3" v-model="model" @fatherMethod="nextStep"></occupation>
    <salaryRange v-else-if="current == 4" v-model="model" @fatherMethod="nextStep"></salaryRange>
    <uploadPhotos v-else-if="current == 5" v-model="model" @fatherMethod="nextStep"></uploadPhotos>
    <location v-else-if="current == 6" v-model="model" @fatherMethod="nextStep"></location>
    <realName v-else v-model="model"></realName>
  </div>
</template>

<script setup lang="ts">
import baseInfo from "@/packagePages/my/completeInfo/components/baseInfo.vue";
import heightHomeTown from "@/packagePages/my/completeInfo/components/heightHomeTown.vue";
import educationSchool from "@/packagePages/my/completeInfo/components/educationSchool.vue";
import occupation from "@/packagePages/my/completeInfo/components/occupation.vue";
import salaryRange from "@/packagePages/my/completeInfo/components/salaryRange.vue";
import uploadPhotos from "@/packagePages/my/completeInfo/components/uploadPhotos.vue";
import location from "@/packagePages/my/completeInfo/components/location.vue"; //获取定位
import realName from "@/packagePages/my/completeInfo/components/realName.vue"; //实名认证
const { proxy } = getCurrentInstance();
import useCounterStore from "@/stores/counter";
const counter = useCounterStore();
let current = ref(0);

let model = ref({
  nickName: "",
  sex: "MAN",
  birthday: "",
  logoId: "",
  constellation: "", //星座
  height: 150,
  school: "", //毕业学校
  edu: "", //学历
  homeEconomize: "",
  homeMarket: "",
  homeCounty: "",
  industry: "", //行业,
  income: "", //收入
  lifePhotosId: "", //生活照
  cityLon: "",
  cityLat: "",
  city: "",
  reallyName: "",
  idCard: "",
  oneselfTags: "", //自我标签
  hisTags: "", //对方期望标签
  oneselfDescribe: "", //自我描述
  hisDescribe: "", //期望对方描述
});

onShow(() => {
  setCss();
  getHeadParams();
});

let setCss = async () => {
  uni.setNavigationBarColor({
    frontColor: "#000000", //文字颜色
    backgroundColor: "#ffffff", //底部背景色
  });

  //省市区
  let data = await proxy.$apis.ObtainHometown();
  counter.setRelease("hometown", data);
};
let getHeadParams = async () => {
  if (counter.slParams.cropperUrl) {
    let resp = await counter.uploadHeadImgFile(counter.slParams.cropperUrl);
    model.value.avatarUrl = resp.pictureUrl;
    model.value.logoId = resp.id;
    counter.setRelease("cropperUrl", "");
  }
};
let nextStep = () => {
  current.value++;
};
let save = async () => {
  await proxy.$apis.loginReginfo(model.value);
  proxy.$util.showToast("保存成功");
};
</script>



<style lang="scss" scoped>
.container {
  padding: 16px;
  .steps {
    grid-template-columns: repeat(8, 1fr); /* 8等分 */
    grid-gap: 5px; /* 设置间隔 */
    margin-bottom: 35px;
    .step {
      background-color: #d4d4d4;
      width: 100%;
      height: 3px;
      border-radius: 1px;
      grid-column: span 1 / span 1;
    }
    .active {
      background-color: #0069ff !important;
    }
  }
}
</style>
